<template>
  <!-- 搜索表单-->

  <el-button type="primary" @click="handleSearch">查询</el-button>
  
  <el-dialog title="审批" v-model="dialogVisibleEdit" width="30%">
    <el-form ref="form" :model="employee" label-width="80px">
      <el-form-item label="员工编号">
        <el-input v-model="employee.employeeId" disabled></el-input>
      </el-form-item>
      <el-form-item label="员工姓名">
        <el-input v-model="employee.employeeName"></el-input>
      </el-form-item>
      <el-form-item label="请假事由">
        <el-input v-model="employee.leaveType" disabled></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-input v-model="employee.startDate" disabled></el-input>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-input v-model="employee.endDate" disabled></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="employee.status" class="m-2" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleEdit">提交</el-button>
        <el-button @click="dialogVisibleEdit = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 表格数据 -->
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
    class="my-table"
  >
    <el-table-column prop="employeeId" label="员工编号" align="center">
    </el-table-column>
    <el-table-column prop="employeeName" label="员工姓名" align="center">
    </el-table-column>
    <el-table-column prop="leaveType" label="请假事由" align="center">
    </el-table-column>
    <el-table-column prop="startDate" label="开始日期" align="center">
    </el-table-column>
    <el-table-column prop="endDate" label="结束日期" align="center">
    </el-table-column>
    <el-table-column prop="status" label="状态" align="center">
    </el-table-column>

    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button :disabled="disabledFunc(scope.row)" type="primary" size="small" @click="handleUpdate(scope.row)"
          >审批</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :page-sizes="[5, 10, 15, 20]"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="parseInt(totalCount)"
  >
  </el-pagination>
</template>

<script>
import axios from 'axios';
import { reactive, ref } from 'vue';
const API_URL = 'http://localhost:8080/approvals'; // 替换为实际的 API 地址
const formAdd = ref();
export default {
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      totalCount: 0,
      tableData: [],
      dialogVisible: false,
      dialogVisibleEdit: false,
      employee: {
        id: '',
        employeeName: '',
        department: '',
        position: '',
      },
      options: [
        {
          value: '已批准',
          label: '已批准',
        },
        {
          value: '待审批',
          label: '待审批',
        },
        {
          value: '已拒绝',
          label: '已拒绝',
        }
      ],
    };
  },

  mounted() {
    this.getAll();
  },
  
  methods: {
    async handleSearch() {
      this.currentPage = 1;
      this.pageSize = 10;
      this.getAll();
    },
    getAll() {
      //发送ajax请求
      axios
        .get(
          'http://localhost:8080/approvals/page?currentPage=' +
            this.currentPage +
            '&pageSize=' +
            this.pageSize
        )
        .then((res) => {
          console.log(res.data);
          //设置表格数据
          this.tableData = res.data.rows;
          this.totalCount = res.data.totalCount;
        });
    },
    async addEmployee() {
      try {
        await axios.post(API_URL, this.employee);
        this.dialogVisible = false;
        this.getAll();
        this.resetForm();
        this.$message.success('员工添加成功');
      } catch (error) {
        console.error(error);
        this.$message.error('员工添加失败');
      }
    },
    resetForm() {
      formAdd.resetFields();
    },
    handleCreate() {
      this.dialogVisible = true;
      this.resetForm();
    },
    async handleDelete(row) {
      try {
        await axios.delete(`${API_URL}/${row.id}`);
        this.getAll();
        this.$message.success('员工删除成功');
      } catch (error) {
        console.error(error);
        this.$message.error('员工删除失败');
      }
    },
    async handleUpdate(row) {
      console.log('ddddddd', row);
      this.employee = { ...row };
      this.dialogVisibleEdit = true;
    },
    async handleEdit() {
      try {
        await axios.put(API_URL, this.employee);
        // console.log('1'+this.employee);
        this.dialogVisibleEdit = false;
        this.getAll();
        this.$message.success('审批成功');
      } catch (error) {
        console.error(error);
        this.$message.error('审批失败');
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'table-row-even';
      }
      return '';
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAll();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      //点击后重新设置当前页码
      this.currentPage = val;
      this.getAll();
    },
    disabledFunc(row) {
      if (row.status === '已批准' || row.status === '已拒绝') {
        return true;
      }
      return false;
    },
  },
};
</script>

<style scoped>
.table-row-even {
  background-color: #f5f7fa;
}
</style>
